<html>
<head>
    <title>Deferred Skinning</title>
    <meta charset="utf-8">
    <script src="../dist/claygl.js"></script>
</head>
<body style="margin:0px">
    <canvas id="Main"></canvas>

    <script type="text/javascript">

        function createSkeletonDebugScene(skeleton, clay) {
            var scene = new clay.Scene();
            var sphereGeo = new clay.geometry.Sphere({
                radius : 0.1
            });
            var sphereMat = new clay.Material({
                shader : new clay.Shader({
                    vertex : clay.Shader.source("clay.basic.vertex"),
                    fragment : clay.Shader.source("clay.basic.fragment")
                })
            });
            sphereMat.set("color", [0.3, 0.3, 0.3]);

            var jointDebugSpheres = [];

            var updates = [];
            skeleton.joints.forEach(function(joint) {

                var parentJoint = skeleton.joints[joint.parentIndex];
                var sphere = new clay.Mesh({
                    geometry : sphereGeo,
                    material : sphereMat,
                    autoUpdateLocalTransform : false
                });
                scene.add(sphere);

                var lineGeo = new clay.StaticGeometry();
                var lineGeoVertices = lineGeo.attributes.position;
                lineGeoVertices.fromArray([0, 0, 0, 0, 0, 0]);
                var line = new clay.Mesh({
                    geometry: lineGeo,
                    material: sphereMat,
                    mode: clay.Mesh.LINES,
                    lineWidth: 2
                });
                scene.add(line);

                updates.push(function() {
                    sphere.localTransform.copy(joint.node.worldTransform);
                    if (parentJoint) {
                        lineGeoVertices.set(0, joint.node.getWorldPosition().array);
                        lineGeoVertices.set(1, parentJoint.node.getWorldPosition().array);
                    }
                    lineGeo.dirty();
                });
            });

            scene.before('render', function() {
                for (var i = 0; i < updates.length; i++) {
                    updates[i]();
                }
            });
            return scene;
        }


        var renderer = new clay.Renderer({
            canvas : document.getElementById("Main")
        });
        var deferredRenderer = new clay.deferred.Renderer();

        renderer.resize(window.innerWidth, window.innerHeight);

        var GLTFLoader = new clay.loader.GLTF({
            useStandardMaterial: true
        });

        GLTFLoader.load("assets/models/whale/whale-anim.gltf");

        GLTFLoader.on('success', function(res) {
            var scene = res.scene;
            var skeleton = res.skeletons[0];
            var clip = res.clips[0];
            var camera = new clay.camera.Perspective({
                aspect : renderer.getViewportAspect()
            });

            camera.position.set(0, 10, 30);
            camera.lookAt(new clay.Vector3(0, 2, 0));

            camera.aspect = renderer.canvas.width / renderer.canvas.height;

            var control = new clay.plugin.OrbitControl({
                target: camera,
                domElement: renderer.canvas,
                sensitivity: 0.4
            });

            var light = new clay.light.Directional({
                intensity: 1
            });
            light.position.set(1, 1, 1);
            light.lookAt(scene.position);
            scene.add(light);

            var plane = new clay.Mesh({
                geometry: new clay.geometry.Plane(),
                material: new clay.StandardMaterial()
            });
            plane.rotation.rotateX(-Math.PI / 2);
            plane.scale.set(20, 20, 1);
            scene.add(plane);

            scene.add(new clay.light.Ambient({
                intensity : 0.2
            }));

            var timeline =  new clay.Timeline();
            timeline.start();
            timeline.addClip(clip);

            // var skeletonDebugScene = createSkeletonDebugScene(skeleton, clay);
            // skeletonDebugScene.position.x = -10;
            timeline.on('frame', function() {
                control.update(50);
                skeleton.update();
                deferredRenderer.render(renderer, scene, camera);

                // renderer.saveClear();
                // renderer.clearBit = renderer.gl.DEPTH_BUFFER_BIT;
                // renderer.render(skeletonDebugScene, camera);
                // renderer.restoreClear();
            });
        });
    </script>
</body>
</html>